.navigation-cneter {
  min-height: 80vh;
  padding: 50rpx 20rpx;
  background-image: linear-gradient(#2087fe, #99baf5 250rpx, transparent 500rpx);

  .user-info {
    margin-bottom: 30rpx;
    padding: 20rpx 0;

    .user-name {
      display: flex;
      align-items: center;
      height: 50rpx;
      font-size: var(--medium-font);
      color: var(--main-text);
      font-weight: bold;
      padding: 0 30rpx;
      // border-bottom: 2rpx solid var(--border-color);
    }

    .info-item {
      line-height: 40rpx;
      color: var(--main-text);
      font-size: var(--small-font);
      margin: 20rpx 0;
      padding: 0 30rpx;
    }
  }
  
  .charge-wrap{
    padding: 0;
    .charge-detail {
      padding: 0 20rpx;
      .charge-title {
        display: flex;
        align-items: center;
        height: 80rpx;
        font-size: var(--medium-font);
        color: var(--main-text);
        font-weight: bold;
        padding: 0 30rpx;
      }
  
      .charge-item {
        display: flex;
        align-items: center;
  
        .charge-check {
          margin-right: 30rpx;
        }
  
        .charge-info {
          min-width: 0;
          flex: 1;
  
          .charge-info-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 68rpx;
            color: var(--main-text);
            font-size: var(--small-font);
  
            .charge-value {
              font-weight: bold;
              color: var(--secondary-color);
            }
          }
        }
      }
      .no-charge{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: var(--color-priamry);
      }
    }
  }
  .sum-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    margin-top: 30rpx;
    background-color: #f6f7fb;
    border-radius: 8px;
    padding: 0 30rpx;

    .charge-value {
      font-weight: bold;
      font-size: 36rpx;
      color: var(--color-priamry);
    }
  }

  .charge-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    color: #fff;
    font-size: var(--medium-font);
    font-weight: bold;
    background-color: var(--color-priamry);
    border-radius: 16rpx;
  }
}